<template>
    <div class="city" @click="selectCity">
        <span class="f14">{{ city }}</span>
        <img v-if="flag" class="down" src="@/assets/images/right.png">
        <img v-else src="@/assets/images/more.png">
    </div>
</template>
<script>
export default {
    name: "City",
    props: { flag: Boolean },
    data() {
        return {
            city: "全国",
        }
    },
    mounted() {
        this.city = localStorage.getItem("city") || "全国";
    },
    methods: {
        selectCity() {
            this.$router.push({ name: "city" })
        },
    }
}
</script>
<style lang="scss" scoped>
.city {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 65px;
    flex-shrink: 0;

    span {
        display: block;
        width: 45px;
        overflow: hidden;
        white-space: nowrap;
    }

    img {
        width: 5px;
        margin-left: 5px;
        transform: rotateZ(90deg);
    }

    .down {
        width: 14px;
        margin-left: -1px;
        transform: rotateZ(89deg);
    }
}
</style>